<!-- 
 *@Description: 分组柱状图
 *@Author: ʟɪ ᴢʜɪ ᴛᴏɴɢ
 *@Date: 2022-10-17 10:47:34
-->
<template>
  <div id="mychart">柱状图</div>
</template>

<script>
export default {
  name: 'Histogram',
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        tooltip: {},
        dataset: {
          dimensions: ['product', '建筑工程', '市政工程', '其他工程'],
          source: [
            { product: '一月', 建筑工程: 43.3, 市政工程: 85.8, 其他工程: 93.7 },
            { product: '二月', 建筑工程: 83.1, 市政工程: 73.4, 其他工程: 55.1 },
            { product: '三月', 建筑工程: 86.4, 市政工程: 65.2, 其他工程: 82.5 },
            { product: '四月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '五月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '六月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '七月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '八月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '九月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            { product: '十月', 建筑工程: 72.4, 市政工程: 53.9, 其他工程: 39.1 },
            {
              product: '十一月',
              建筑工程: 72.4,
              市政工程: 53.9,
              其他工程: 39.1
            },
            {
              product: '十二月',
              建筑工程: 72.4,
              市政工程: 53.9,
              其他工程: 39.1
            }
          ]
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
        legend: {
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        }
      };
      const myChart = this.$echarts.init(document.getElementById('mychart'));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
#mychart {
  padding: 20px 0;
  width: 100%;
  height: 95%;
}
</style>